<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">埋点URL信息</h5>
                    <div class="stayRight ">
                        <el-button @click="refreshData()">刷新</el-button>
                    </div>
                    
                </div>
            </section>
            <section class="searchBar">
                <div class="form-inline">
                    <div class="pull-left">
                        <div class="searchSel">
                            <el-select v-model="selectedPlat">
                                <el-option v-for="item in plats" :key="item.key" :value="item.key" :label="item.text">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="searchSel">
                            <el-select v-model="column" placeholder="搜索">
                                <el-option v-for="item in columns" :key="item.key" :value="item.key" :label="item.text">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="searchIpt">
                            <el-autocomplete v-model="searchURL" placeholder="请输入关键字进行搜索" :fetch-suggestions="queryURLs" @select="handleSelect" :trigger-on-focus="false" class="searchIpt1"></el-autocomplete>
                        </div>
                        <div class="searchbtn">
                            <el-button @click="getUrlList(1)">搜索</el-button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="plat" label="平台" width="65"> </el-table-column>
                    <el-table-column prop="url" label="url" sortable="custom" width="400"> </el-table-column>
                    <el-table-column prop="pageName" label="页面名称" sortable="custom" > </el-table-column>
                    <el-table-column prop="actions" label="已上报事件" > </el-table-column>
                    <el-table-column prop="tag" label="所属标签" sortable="custom" > </el-table-column>
                    <el-table-column prop="lastEventTime" sortable="custom" label="最后上报时间" :formatter="formatTime"> </el-table-column>
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                        </el-pagination>
                    </div>
                    <div class="pullLeft">
                        <el-button  size="small" name="button-del" @click="showUpdateDialog()" :disabled="addTagsDisable">修改标签</el-button>
                    </div>
                </div>
            </section>

            <el-dialog title="修改标签" :visible.sync="updateDialogVislble" :lock-scroll="false" size="tiny">
                <div class="scoreContainer tagCategory">
                    <el-form :model="updateForm" :rules="updateRules" ref="updateForm">
                        <el-form-item label="标签" label-width="110px"  prop="searchTag">
                            <el-autocomplete v-model="updateForm.searchTag" placeholder="请输入标签" :fetch-suggestions="queryTags" @select="handleSelect" :trigger-on-focus="false" ></el-autocomplete>
                        </el-form-item>
                    </el-form>
                </div>          
                <span slot="footer" class="dialog-footer">
                    <el-button @click="updateDialogVislble = false">取 消</el-button>
                    <el-button type="primary" @click="creatSubmit('updateForm')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getList, queryKeywords, batchUpdateTag } from '@/api/urlActionData'
import { Loading } from 'element-ui'
import { parseTime } from '@/utils/index'
export default {
  data() {
    return {
      dataArr: null,
      currPage: 1,
      pageSize: 10,
      totalCount: 0,
      prop: '',
      order: '',
      selectedPlat: '',
      plats: [{
        key: '',
        text: '全部'
      }, {
        key: 'app',
        text: 'app'
      }, {
        key: 'pc',
        text: 'pc'
      }],
      column: 'pageName',
      columns: [{
        key: 'pageName',
        text: '页面名称'
      }, {
        key: 'url',
        text: '页面路径'
      }],
      searchURL: '',
      addTagsDisable: true,
      selectedIds: [],
      updateDialogVislble: false,
      updateForm: {
        searchTag: ''
      },
      updateRules: {
        searchTag: [
          { required: true, message: '请输入标签', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getUrlList(1)
  },
  methods: {
    getUrlList(currPage) {
      this.currPage = currPage
      var loadId = Loading.service({ text: '加载中，请稍等' })
      var listQuery = { plat: this.selectedPlat, column: this.column, keyword: this.searchURL, currPage: this.currPage, pageSize: this.pageSize, prop: this.prop, order: this.order }
      getList(listQuery).then(response => {
        console.log(response)
        this.dataArr = response.data.page.list
        loadId.close()
        this.totalCount = response.data.page.totalCount
        if (this.dataArr.length) {
          this.dataArr.forEach(function(element) {

          }, this)
        }
      }).catch(_ => {
        loadId.close()
        /* this.$message({
          showClose: true,
          message: '获取失败，请联系管理员',
          type: 'error'
        });*/
      })
      // 查询出所有标签等;
    },
    queryURLs(kw, cb) {
      var keywordQuery = { column: this.column, plat: this.selectedPlat, keyword: kw }
      const res = []
      queryKeywords(keywordQuery).then(response => {
        if (response.data.keywords) {
          response.data.keywords.forEach(function(ele) {
            res.push({ value: ele })
          })
          cb(res)
        }
      }).catch(_ => {
      })
    },
    queryTags(kw, cb) {
      var keywordQuery = { column: 'tag', plat: this.selectedPlat, keyword: kw, ids: this.selectedIds }
      const res = []
      queryKeywords(keywordQuery).then(response => {
        response.data.keywords.forEach(function(ele) {
          res.push({ value: ele })
        })
        cb(res)
      }).catch(_ => {
      })
    },
    showUpdateDialog() {
      this.updateDialogVislble = true
    },
    creatSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var loadId = Loading.service({ text: '正在修改标签' })
          var updateData = { tag: this.updateForm.searchTag, ids: this.selectedIds }
          console.log(updateData)
          batchUpdateTag(updateData).then(response => {
            loadId.close()
            this.$message({
              showClose: true,
              message: '成功修改' + response.data.rows + '条数据',
              type: 'success'
            })
            this.getUrlList(this.currPage)
            this.updateDialogVislble = false
          }).catch(_ => {
            loadId.close()
          })
        }
      })
    },
    refreshData() {
      this.selectedPlat = ''
      this.searchURL = ''
      this.getUrlList(1)
    },
    formatTime(row, column) {
      return parseTime(row.lastEventTime)
    },
    handleSelect(item) {
      console.log(item)
    },
    handleCurrentChange(currPage) {
      this.currPage = currPage
      this.getUrlList(currPage)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getUrlList(1)
    },
    handleSortChange(sort) {
      console.log(sort)
      this.prop = sort.prop
      this.order = sort.order
      if (this.order) {
        this.order = sort.order.startsWith('asc') ? 'asc' : 'desc'
      }
      this.getUrlList(1)
    },
    handleSelectionChange(val) {
      this.selectedIds = []
      if (val.length) {
        this.updateForm.searchTag = val[0].tag
        this.addTagsDisable = false
        for (var i = 0; i < val.length; i++) {
          this.selectedIds.push(val[i].id)
        }
      } else {
        this.addTagsDisable = true
      }
      console.log(this.selectedIds, 'selectedIds')
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
            .creatSite{
                float: left;
            }
        }
    }
}
.searchSel{
    width: 105px;
    display: inline-block;
}
.searchIpt{
    width: 650px;
    display: inline-block;
}
.searchIpt1{
  width:100%;
}
.searchbtn{
    width: 100px;
    display: inline-block;
}
.searchBar{
    padding: 0 10px;
}
.tableMain{
    padding: 10px;
}
.typeform{
    display: inline;
    .form-control{
        border: none;
        padding: 0;
        box-shadow:none;
        display: inline;
        height:30px;
        width:60%;
    }
}
.spantype{
    display: inline;
}
.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullright{
        float: right;
    }
}
.statusError{
    color: red;
}
</style>


